<template>
    <div class="diary">
        <div class="line"></div>
        <h2><span class="iconfont">&#xe623;</span>博客,记录美好生活</h2>
        <div class="timeline-year">
            <h2>
                <a class="yearToggle">2020  年</a>
                <i class="iconfont">&#xe526;</i>
            </h2>
            <div class="timeline-month">
                <ul>
                    <li v-for="(item,index) in diaryList" :key="index">
                        <div class="month">
                            <p class="data">{{item.time|month}}月{{item.time|day}}日</p>
                        </div>
                        <p class="dot">
                            <i class="iconfont">&#xe50d;</i>
                        </p>
                        <div class="content">
                            {{item.desc}}
                            <img :src="item.img" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <h1 class="footer"><span class="iconfont">&#xe581;</span>THE END</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {
            diaryList:[]
        }
    },
    methods: {
        getDiary(){
            this.$axios.get("/diary")
                .then(res=>{
                    this.diaryList=res.data
                })
        }
    },
    created() {
        this.getDiary()
    },
    filters:{
        month(val){
            return (new Date(val).getMonth()+1).toString().padStart(2,"0")  
        },
        day(val){
            return new Date(val).getDate().toString().padStart(2,"0")
        }
    }
}
</script>

<style lang="less" scoped>
.diary{
    position:relative;
    box-sizing: border-box;
    width:90%;
    background:white;
    margin:20px auto;
    padding:0 50px 0;
    .line{
        position:absolute;
        left:220px;
        top:0;
        z-index: 0;
        width:2px;
        height:70%;
        height:100%;
        background:black;
    }
    >h2{
        background-color:white;
        position: relative;
        z-index: 1;
        margin-left: calc(18% - 50px);
        font-size: 28px;
        color: #484348;
        line-height: 76px;
        span{
            margin-right:10px;
            font-size:35px;
        }
    }
    .timeline-year{
        position: relative;
        width:100%;
        min-height:200px;
        >h2{
            position:relative;
            font-size: 23px;
            color: #6bc30d;
            line-height: 40px;
            margin-bottom: 20px;
            a{
                color: #6bc30d;
                margin-left:20px;
            }
            i{
                position:absolute;
                z-index: 2;
                left:130px;
                top:0;
                font-size:23px;
            }
        }
        .timeline-month{
            li{
                margin-bottom:30px;
                display: flex;
                .month{
                    margin-top: 5px;
                    text-align:right;
                    width:13%;
                    animation: month ease-out .8s forwards;
                    .data{
                        color: #484348;

                    }
                    @keyframes month {
                        0%{
                            transform: translateX(-100px);
                            opacity: 0;
                        }
                        100%{
                            transform: translateX(0);
                            opacity: 1;
                        }
                    }
                }
                .dot{
                    width:30px;
                    height:30px;
                    background:white;
                    i{
                        margin-left:10px;
                        display: inline-block;
                        width:13px;
                        height:30px;
                        font-size:30px;
                    }
                }
                .content{
                    position: relative;
                    margin:2px 0 0 30px;
                    min-width:40px;
                    max-width: 727px;
                    min-height:25px;
                    line-height: 23px;
                    background: #484348;
                    padding:14px 20px;
                    color:white;
                    font-size:15px;
                    animation: content ease-out .8s forwards;
                    img{
                        width:730px;
                        text-align: center;
                    }
                    &::after{
                        position: absolute;
                        left:-10px;
                        top:5px;
                        content:"";
                        // display: block;
                        width:0;
                        height:0;
                        border-right:10px solid  #484348;
                        border-top:6px solid transparent;
                        border-bottom:6px solid transparent;
                    }
                    @keyframes content {
                        0%{
                            transform: translateX(200px);
                            opacity: 0;
                        }
                        100%{
                            transform: translateY(0);
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
    .footer{
        margin-left:157px;
        position:relative;
        z-index: 2;
        font-size:30px;
        color: #484348;
        line-height: 80px;
        background-color: white;
        span{
            display: inline-block;
            width:30px;
            height:30px;
            background:white;
            font-size:35px;
            margin-right:30px;
        }
    }
}
</style>